<template>
  <div class="musicTop">
    <div class="musicSearch">
      <svg class="icon" aria-hidden="true" @click="$router.go(-1)">
        <use xlink:href="#icon-zuojiantou"></use>
      </svg>
      <input
        class="search"
        v-model="keyWord"
        type="text"
        placeholder="周杰伦"
        @keydown.enter="enterHand"
      />
    </div>
    <div class="history">
      <span class="spankey">历史</span>
      <span
        class="spanItem"
        v-for="item in historyList"
        :key="item"
        @click="searchHistory(item)"
        >{{ item }}</span
      >
      <svg class="icon" aria-hidden="true" @click="delHistory">
        <use xlink:href="#icon-shanchu"></use>
      </svg>
    </div>
    <div class="musicContent" v-for="(item, index) in searchList" :key="item">
      <div class="musicLeft" @click="updataIndex(item)">
        <div class="musicIndex">{{ index + 1 }}</div>
        <div class="musicArr">
          <div class="musicName">{{ item.name }}</div>
          <div
            class="musicAction"
            v-for="(item1, index1) in item.artists"
            :key="index1"
          >
            <span>{{ item1.name }}</span>
          </div>
        </div>
      </div>
      <div class="musicRight">
        <div class="musicMv" v-if="item.mvid != 0">
          <svg class="icon" aria-hidden="true" @click="goMv(item.mvid)">
            <use xlink:href="#icon-shipin"></use>
          </svg>
        </div>
        <div class="musicMun">
          <svg class="icon" aria-hidden="true">
            <use xlink:href="#icon-caidan"></use>
          </svg>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getSearchMusic } from "@/request/api/home";
export default {
  data() {
    return {
      historyList: [],
      keyWord: "",
      searchList: [],
    };
  },
  mounted() {
    //有数据或者为空数据
    this.historyList = JSON.parse(localStorage.getItem("historyList")) || [];
  },
  methods: {
    enterHand() {
      if (this.keyWord !== "") {
        this.historyList.unshift(this.keyWord);
        //数组去重
        this.historyList = [...new Set(this.historyList)];
        localStorage.setItem("historyList", JSON.stringify(this.historyList));
        //数据太多删除
        if (this.historyList.length > 5) {
          this.historyList.splice(this.historyList.length - 1, 1);
        }
        console.log(this.keyWord);
        getSearchMusic(this.keyWord).then((res) => {
          console.log(res.data);
          this.searchList = res.data.result.songs;
        });
        this.keyWord = "";
      }
    },
    //点击搜索
    searchHistory(item) {
      console.log("7777", item);
      getSearchMusic(item).then((res) => {
        console.log(res.data.result.songs);
        this.searchList = res.data.result.songs;
      });
      console.log("444", this.searchList);
    },
    goMv(res) {
      console.log(res);
      this.$store.commit("updataMvid", res);
      //页面跳转
      this.$router.push("/MusicMv");
    },
    //删除历史记录
    delHistory() {
      localStorage.removeItem("historyList");
      this.historyList = [];
    },
    updataIndex(item) {
      item.al = item.album;
      item.al.picUrl = item.album.artist.img1v1Url;
      console.log(item.album.artist.img1v1Url);

      //将数据添加到播放列表
      this.$store.commit("playSearchList", item);
      //修改播放的列表
      this.$store.commit(
        "updataMusicIndex",
        this.$store.state.playList.length - 1
      );
    },
  },
};
</script>
<style lang="less" scoped>
.musicTop {
  .musicSearch {
    width: 100%;
    padding: 0.2rem;
    display: flex;
    align-items: center;
    .search {
      border: none;
      width: 95%;
      margin-left: 0.2rem;
      border-bottom: 1px solid #999;
      padding: 0.1rem;
    }
  }
  .history {
    width: 100%;
    padding: 0.2rem;
    position: relative;
    .spankey {
      font-weight: 800;
    }
    .spanItem {
      padding: 0.1rem 0.2rem;
      background-color: #bab495;
      border-radius: 0.4rem;
      margin: 0.1rem 0.15rem;
      display: inline-block;
    }
    .icon {
      width: 0.34rem;
      height: 0.34rem;
      position: absolute;
      right: 0.2rem;
    }
  }
  .musicContent {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0.2rem;
    .musicLeft {
      display: flex;
      justify-content: space-around;
      align-items: center;
      .musicArr {
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .musicName {
          padding: 0 0.4rem;
          font-size: 0.3rem;
          font-weight: 900;
        }
        .musicAction {
          color: #a69e9e;
          padding: 0 0.4rem;
          span {
            display: flex;
            flex-direction: row;
          }
        }
      }
    }
    .musicRight {
      display: flex;
      .musicMv {
        padding: 0 0.2rem;
        .icon {
          fill: #a69e9e;
        }
      }
      .musicMum {
        .icon {
          fill: #a69e9e;
        }
      }
    }
  }
}
</style>
